<template>
<basic-container>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="auto"
    >
<!--   <el-form-item label="搜索会员" prop="memberId"  v-if="!readonly">
        <el-select
          style="width:100%;"
          v-model="dataForm.memberId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入姓名/电话"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in platfromMembers"
            :key="item.id"
            :label="'[昵称]'+item.name+' --- [姓名]'+ ( item.zsName == null ? '暂未设置':item.zsName )+' --- [手机]'+item.tel"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="会员卡号" prop="cardNo">
        <el-input  v-model="dataForm.cardNo" placeholder="会员卡号"></el-input>
      </el-form-item>
      <el-form-item label="等级类型" prop="levelId">
        <el-select style="width:100%;" v-model="dataForm.levelId" placeholder="请选择等级" @change="updatePayAcount">
          <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员费" prop="payAmount">
        <el-input  v-model="dataForm.payAmount" placeholder="会员费"></el-input>
      </el-form-item>
      <el-form-item label="付款方式" prop="payType">
<!--        <el-radio label="0" v-model="dataForm.payType" name="payType" >现金</el-radio>
        <el-radio label="1"  v-model="dataForm.payType" name="payType" >微信</el-radio>
        <el-radio label="2"  v-model="dataForm.payType" name="payType" >支付宝</el-radio>
        <el-radio label="3"  v-model="dataForm.payType" name="payType" >银行卡</el-radio>
        <el-radio label="4"  v-model="dataForm.payType" name="payType" >其他</el-radio> -->
        <el-select v-model="dataForm.payType" placeholder="请选择">
          <el-option v-for="item in options.paysTypeOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input  v-model="dataForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
       <el-radio label="1" v-model="dataForm.gender" name="gender" >男</el-radio>
        <el-radio label="2"  v-model="dataForm.gender" name="gender" >女</el-radio>
       <!-- <el-select :readonly="true" v-model="dataForm.gender" placeholder="请选择">
               <el-option
                 v-for="item in sexList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select> -->
      </el-form-item>
      <el-form-item  label="证件类型" prop="certificate">
<!--        <el-radio label="0" v-model="dataForm.certificate" name="certificate" >身份证</el-radio>
        <el-radio label="1"  v-model="dataForm.certificate" name="certificate" >军官证</el-radio>
        <el-radio label="2"  v-model="dataForm.certificate" name="certificate" >护照</el-radio> -->
        <el-select   v-model="dataForm.certificate" placeholder="请选择">
               <el-option
                 v-for="item in documentList"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id">
               </el-option>
             </el-select>
      </el-form-item>
      <el-form-item label="证件号" prop="certificateNo">
        <el-input  v-model="dataForm.certificateNo" placeholder="证件号"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input  v-model="dataForm.address" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="消费密码" prop="password">
        <el-input v-if="payPwd" v-model="dataForm.password" :placeholder="payPwd" show-password></el-input>
        <el-input v-if="!payPwd" v-model="dataForm.password"  placeholder="消费密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="有效期" prop="endTimeType">
        <el-radio label=false  v-model="dataForm.endTimeType"  >无限制</el-radio>
        <el-radio label=true v-model="dataForm.endTimeType"  >截至到</el-radio>
        <el-date-picker
          v-model="dataForm.endTime"
          type="date"
          value-format="yyyy/MM/dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="推荐员工" prop="salesman">
        <el-input v-model="dataForm.salesman" placeholder="推荐员工"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input   v-model="dataForm.mobile" placeholder="手机"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
    </span>
</basic-container>
</template>

<script>
export default {
  name:"addOrmemberUpdate",
  props:{
    retruenRen:{
      type:Function
    },
    rows:{
        type: Object,
       default () {
         return {}
       }
     }
  },
  data() {
    return {
      options: {
        paysTypeOptions: [],
        },
       documentList:[],
      readonly:false,
      platformMember: {},
      visible: false,
      levelList: [],
      sellerId:0,
      //
      platfromMembers: [],
      value: "",
      list: [],
      loading: false,
      states: [],
      payPwd: null,
      //
      dataForm: {
        tguestId:'',
        id: 0,
        endTimeType: "false",
        levelId: "",
        memberId: "",
        certificate: "",
        certificateNo: "",
        password: "",
        name: "",
        mobile: "",
        gender: "0",
        payType: "",
        cardNo: "",
        address: "",
        creator: "",
        createDate: "",
        updateDate: "",
        sellerId: "",
        status: "",
        salesman: "",
        score: "",
        balance: ""
      },
      sexList:[
        {name:'男',val:'1'},
        {name:'女',val:'2'}
      ],
      dataRule: {
        endTimeType:[{ required: true, message: "有效期不能为空", trigger: "blur" }],
        payType:[
          { required: true, message: "支付类型不能为空", trigger: "blur" }
        ],
        levelId: [
          { required: true, message: "等级类型不能为空", trigger: "blur" }
        ],
        memberId: [
          { required: true, message: "会员ID不能为空", trigger: "blur" }
        ],
        certificate: [
          { required: true, message: "证件类型不能为空", trigger: "blur" }
        ],
        certificateNo: [
          { required: true, message: "证件号不能为空", trigger: "blur" }
        ],
        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
        mobile: [{ required: true, message: "手机不能为空", trigger: "blur" }],
        gender: [{ required: true, message: "性别不能为空", trigger: "blur" }],

        creator: [
          { required: true, message: "创建者不能为空", trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        updateDate: [
          { required: true, message: "修改时间不能为空", trigger: "blur" }
        ],
        sellerId: [
          { required: true, message: "商家ID不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态，1为有效不能为空", trigger: "blur" }
        ],
        salesman: [
          { required: false, message: "推荐员工不能为空", trigger: "blur" }
        ],
        score: [{ required: true, message: "积分不能为空", trigger: "blur" }],
        balance: [{ required: true, message: "余额不能为空", trigger: "blur" }]
      }
    };
  },
  created() {
      console.log(this.rows)
    this.init(this.rows);
  this.getagreementType('document_type');
  this.getPayTypes();
  },
  methods: {
    //获取支付方式
    getPayTypes() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroompaytype/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 1,
          limit: 999,
		  state: 1
        })
      }).then(({
        data
      }) => {
        if (data && data.code === 0) {
          this.options.paysTypeOptions = data.page.list;
        } else {
          this.options.paysTypeOptions = [];
        }
      });
    },
    getagreementType(type){
    			this.$http({
    			  url: this.$http.adornUrl('/hotel/thotelagreementtype/list'),
    			  method: 'get',
    			  params: this.$http.adornParams({
    			    page: 1,
    			    limit: 999,
    			    type:type
    			  })
    			}).then(({ data }) => {
            if(type=='document_type'){
                this.documentList=data.page.list
            }

    			});
    },
    loadSellerLevel(sellerId) {
      return this.$http({
        url: this.$http.adornUrl("/hotel/hotelmemberlevel/sellerLevleList"),
        params: this.$http.adornParams({
          sellerId
        }),
        method: "GET"
      }).then(({ data }) => {

        this.levelList = data.data;
        return this.levelList;
      });
    },
    updatePayAcount() {
      const level = this.levelList.find(l=> l.id == this.dataForm.levelId);
      this.dataForm.payAmount = level.payAmount;
    },
    selectMember(id,value) {
      console.log(this.platfromMembers)
      const member = this.platfromMembers.find(m=>m.id === id)
      this.dataForm.mobile = member.tel;
      this.dataForm.certificateNo = member.identityNo;
      this.dataForm.name = member.zsName;
      this.dataForm.gender = member.gender;
      this.payPwd = member.payPwd ? "******" : null;

    },
    init(row) {

      this.remoteMethod()
      this.loadSellerLevel();
      this.visible = true;
      this.payPwd = null;
      this.readonly = false;

      this.dataForm.name=row.name;
      this.dataForm.gender=row.sex
      this.dataForm.certificate=row.type
      this.dataForm.certificateNo=row.certificateNumber
      this.dataForm.mobile=row.phone
      this.dataForm.address=row.address
      this.dataForm.tguestId=row.id
    },
    //加载平台商家数据
    remoteMethod(query) {
      this.loading = true;
      let that = this
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelmember/platformMember"),
        method: "get",
        params: this.$http.adornParams({
          kw: query
        })
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.platfromMembers = data.data;
          that.platfromMembers.forEach((item,index)=>{
            console.log(!item.tel+'手机号：'+item.tel)
            if(!item.tel){
              that.platfromMembers.splice(index,1)
            }
          })
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/hotel/hotelmemberleveldetail/saveBytGuest`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              levelId: this.dataForm.levelId,
              memberId: this.dataForm.memberId,
              certificate: this.dataForm.certificate,
              certificateNo: this.dataForm.certificateNo,
              name: this.dataForm.name,
              mobile: this.dataForm.mobile,
              gender: this.dataForm.gender,
              payType: this.dataForm.payType,
              cardNo: this.dataForm.cardNo,
              endTime: this.dataForm.endTime,
              endTimeType: this.dataForm.endTimeType,
              address: this.dataForm.address,
              password: this.dataForm.password != "" ? this.dataForm.password : undefined,
              creator: this.dataForm.creator,
              createDate: this.dataForm.createDate,
              updateDate: this.dataForm.updateDate,
              sellerId: this.dataForm.sellerId,
              status: this.dataForm.status,
              salesman: this.dataForm.salesman,
              score: this.dataForm.score,
              balance: this.dataForm.balance,
              tguestId:this.dataForm.tguestId
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.retruenRen();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
